$(function(){
  let type = location.search.split("=")[0].slice(1)
  let id = location.search.split("=")[1]
  // console.log(id);
  // 获取手机信息
  $.ajax({
    url:`http://127.0.0.1:8080/mz/searchEdi/${type}&${id}`,
    type:"get",
    dataType:"json",
    success:function(result){
      // console.log(result[0]);
      let item = result[0]
      $(".mz-title").html(item.title)
      $("font").html(item.advert)
      $(".mz-subtitle").html(item.subtitle)
      $(".mz-price").html(item.price)
      $(".mz-fenqi").html((item.price/12).toFixed(2))
      $(".mz-fq6").html((item.price/6).toFixed(2))
      $(".mz-fq3").html((item.price/3).toFixed(2))
      let specHtml = ""
      for(let i = 0; i < result.length ; i++){
        if(i===0){
          specHtml +=`<a href="javascript:;" class="border-Color" data-t="${i}"><span>${result[i].spec}</span></a>`
        }else{
          specHtml += `<a href="javascript:;" data-t="${i}"><span>${result[i].spec}</span></a>`
        }
      }
      $(".banben dd").html(specHtml)
      $(".mz-spec").html(item.spec)
      if(!result[0].is_onsale){
        $(".b").css("display","none")
      }

      //点击规格切换对应的内容
      $(".banben a").click(function(){
        $(".banben a").removeClass("border-Color")
        $(this).addClass("border-Color")
        // console.log(this.dataset.t)
        $.ajax({
          url:`http://127.0.0.1:8080/mz/searchEdi/${type}&${id}`,
          type:"get",
          dataType:"json",
          success:result=>{
            $(".mz-price").html(result[this.dataset.t].price)
            $(".mz-fenqi").html((result[this.dataset.t].price/12).toFixed(2))
            $(".mz-fq6").html((result[this.dataset.t].price/6).toFixed(2))
            $(".mz-fq3").html((result[this.dataset.t].price/3).toFixed(2))
            $(".mz-spec").html(result[this.dataset.t].spec)
            $("#number").val(1)
          }
        })
      })
    }
  })
  // 获取手机图片
  $.ajax({
    url:`http://127.0.0.1:8080/mz/searchPic/${type}&${id}`,
    type:"get",
    dataType:"json",
    success:function(result){
      let item = result[0]
      $(".mz-pic1").attr("src",item.m1)
      $(".mz-pic2").attr("src",item.m2)
      $(".mz-pic3").attr("src",item.m3)
      $(".mz-pic4").attr("src",item.m4)
      let colorHtml = ""
      for(let i = 0; i < result.length ; i++){
        if(i===0){
          colorHtml +=`
          <a href="javascript:;" class="style" data-t="${i}">
            <img src=${result[i].m5} alt="">
            <span>${result[i].pic_spec}</span>
          </a>`
        }else{
          colorHtml += `
          <a href="javascript:;" class="style other" data-t="${i}">
            <img src=${result[i].m5} alt="">
            <span>${result[i].pic_spec}</span>
          </a>`
        }
      }
      $(".color dd").html(colorHtml)
      $(".mz-color").html(item.pic_spec)

      //点击规格切换对应的内容
      $(".color a").click(function(){
        $(".color a").addClass("other")
        $(this).removeClass("other")
        $.ajax({
          url:`http://127.0.0.1:8080/mz/searchPic/${type}&${id}`,
          type:"get",
          dataType:"json",
          success:result=>{
            // console.log(this.dataset.t);
            $(".mz-pic1").attr("src",result[this.dataset.t].m1)
            $(".mz-pic2").attr("src",result[this.dataset.t].m2)
            $(".mz-pic3").attr("src",result[this.dataset.t].m3)
            $(".mz-pic4").attr("src",result[this.dataset.t].m4)
            $(".mz-color").html(result[this.dataset.t].pic_spec)
          }
        })
      })
    }
  })

  // 轮播效果
  let i = 0
  $(".btn-right").click(function(){
    carousel("right")
  })
  $(".btn-left").click(function(){
    carousel("left")
  })
  function carousel(c){
    let $target = $(".sp_dian")
    if(c=="left"){
      $target.removeClass("bgcolor")
      if(i>0){
        i--
        $(".carImages").css("transform",`translateX(-${i * 580}px)`)
      }
      $($target[i]).addClass("bgcolor")
    }else if(c=="right"){
      $target.removeClass("bgcolor")
      if(i<3){
        i++
        $(".carImages").css("transform",`translateX(-${i * 580}px)`)
      }
      $($target[i]).addClass("bgcolor")
    }
  }

  //数量加减功能
  $(".minus").click(function(){
      let num = $(this).next().val()
      if(num!=1){
        num--
      }
      $(this).next().val(num)
      $(".mz-total").html($(".mz-price").html()*num)
  })
  $(".add").click(function(){
    let num = $(this).prev().val()
    num++
    $(this).prev().val(num)
    $(".mz-total").html($(".mz-price").html()*num)
  })
  
  // 加入购物车
  $(".car").click(function(){
    let spec = $(".border-Color").attr("data-t")
    let color = $(".style:not(.other)").attr("data-t")
    // console.log(color);
    $(this).attr("href",`cart.html?${type}=${id}&spec=${spec}&color=${color}`)
  })
})
